<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 学生类，属于观察者，
        class Student {
            constructor(name, code) {
                this.name = name;
                this.code = code;
            }

            // 当被观察者状态变化时，观察者做出响应
            update(object, event) {
                console.log(`${object.name}进行了${event},${this.name}收到了该操作`);
            }
        }

        // 被观察对象
        class Teacher {
            // 保存所有观察者的实例对象
            studentList = [];
            constructor(name) {
                this.name = name;
            }
            // 将观察对象添加到数组中，
            add(student) {
                const result = this.studentList.some(item => item.code === student.code);
                if (!result) this.studentList.push(student);
            }

            // 还可以添加移除等...

            // 当被观察者状态发生变化时，通过该方法，出发所有观察者状态的变化
            notice(event) {
                this.studentList.forEach((item) => {
                    if (item.update) item.update(this, event);
                })
            }
        }

        // 多个观察者
        const zs = new Student('zs', 111);
        const li = new Student('li', 112);
        const ww = new Student('ww', 113);

        // 被观察者
        const luo = new Teacher('罗老师');

        luo.add(zs);
        luo.add(li);
        luo.add(ww);

        luo.notice('点名');

    </script>
</body>

</html>